<!DOCTYPE HTML>
<html >
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- import start -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/global.css">
    <!-- import end -->
</head>
<body>
    <!-- mine start -->
    <div class="container-fluid mine" id="mine">
        <div class="row">
            <div v-if="userInfo==null" class="col-xs-6">
                <span>东方购物欢迎你，</span>&nbsp;
                <span><u><strong><a href="/login.html">[请登录]</a></strong></u></span>&nbsp;
                <span><u><strong><a href="javascript:void(0)">[免费注册]</a></strong></u></span>
            </div>
            <div v-else>
                <div  class="col-xs-6">
                    <span>东方购物欢迎你，</span>&nbsp;
                    <span><u><strong><a href="javascript:void(0)">[{{userInfo.nickname}}]</a></strong></u></span>&nbsp;
                    <span><u><strong><a href="javascript:void(0)" @click="logout">[退出登录]</a></strong></u></span>
                </div>
                <div class="col-xs-6 text-right">
                    <span><u><strong><a href="/my_orders.html" target="_blank">[我的订单]</a></strong></u></span>&nbsp;
                    <span><u><strong><a href="#" data-toggle="modal" data-target="#addressModal">[我的地址]</a></strong></u></span>&nbsp;
                    <span><u><strong><a href="javascript:void(0)" @click="shopCar">[购物车]</a></strong></u></span>&nbsp;
                </div>
                <!-- Address start -->
                <div class="modal fade" id="addressModal" tabindex="-1" role="dialog" aria-labelledby="addressModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">修改地址</h4>
                            </div>
                            <div class="modal-body">
                                <div class="panel panel-danger" style="background-color:rgba(222,222,222,0.8)">
                                    <div class="panel-heading">
                                        <span>当前地址:</span>
                                        <span>{{userInfo.address}}</span>
                                    </div>
                                    <br>
                                    <div class="panel-body">

                                        <address_select ref="selectAddress"></address_select>

                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                <button @click="updateAddress" type="button" class="btn btn-primary">修改地址</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Address end -->
            </div>
        </div>
    </div>
    <!-- mine end -->

    <!-- header start -->
    <div class="container-fluid header">
        <div class="row">
            <div class="col-xs-12 banner">
                <img src="/img/banner.jpg" />
            </div>
        </div>
    </div>
    <!-- header end -->

    <!-- main start -->
    <div class="container-fluid main" id="goodsDetail">

        <!-- verifyCodeModal start -->
        <div class="modal fade" id="verifyCodeModal" tabindex="-1" role="dialog" aria-labelledby="verifyCodeModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提交订单</h4>
                    </div>
                    <div class="modal-body">
                        <img @click="refreshVerifyCode" :src="verifyCodeUrl" />
                        <br>
                        <input v-model="verifyCode" placeholder="请输入验证码" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                        <button @click="doSeckill" type="button" class="btn btn-primary">提交订单</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- verifyCodeModal end -->

        <!-- tableData start -->
        <div class="panel panel-danger" style="height:100%;background-color:rgba(222,222,222,0.8)">
            <div class="panel-heading">商品详情</div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td>商品名称</td>
                        <td colspan="3">{{data.goods.goodsName}}</td>
                    </tr>
                    <tr>
                        <td>商品图片</td>
                        <td colspan="3"><img :src="data.goods.goodsImg" width="200" height="200" /></td>
                    </tr>
                    <tr>
                        <td>商品描述</td>
                        <td colspan="3">{{data.goods.goodsDetail}}</td>
                    </tr>
                    <tr>
                        <td>秒杀开始时间</td>
                        <td colspan="3">{{new Date(data.goods.seckillStart).format("yyyy-MM-dd hh:mm:ss")}}</td>
                    </tr>
                    <tr>
                        <td>秒杀结束时间</td>
                        <td colspan="3">{{new Date(data.goods.seckillEnd).format("yyyy-MM-dd hh:mm:ss")}}</td>
                    </tr>
                    <tr>
                        <td>秒杀状态</td>
                        <td colspan="3">
                            <input :value="data.goods.id" type="hidden"/>
                            <span v-if="data.remainSeconds==0">秒杀进行中</span>
                            <span v-if="data.remainSeconds>0">距离秒杀开始还有:<span style="color: red;">{{data.remainSeconds}}</span>秒</span>
                            <span v-if="data.remainSeconds<0">秒杀结束</span>

                        </td>
                    </tr>
                    <tr>
                        <td>商品原价</td>
                        <td colspan="3">{{data.goods.goodsPrice}}</td>
                    </tr>
                    <tr>
                        <td>秒杀价</td>
                        <td colspan="3">{{data.goods.seckillPrice}}</td>
                    </tr>
                    <tr>
                        <td>库存数量</td>
                        <td>{{data.goods.seckillStock}}</td>
                        <td colspan="3">
                            <button @click="refreshVerifyCode" :hidden="data.remainSeconds!=0" class="bt btn-lg btn-danger" data-toggle="modal" data-target="#verifyCodeModal">立即秒杀</button>
                        </td>
                    </tr>
                </table>
            </div>

        </div>
        <!-- tableData end -->
    </div>
    <!-- main end -->

    <!-- footer start -->
    <footer>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6">
                    <h4><img src="/img/footImg.jpg" width="250" /></h4>
                    <p>我们一直致力于为广大消费者提供更加优质的购物体验！</p>
                </div>
                <div class="col-xs-6">
                    <div class="row">
                        <div class="col-xs-4">
                            <h4>关于</h4>
                            <ul class="list-unstyled">
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">广告合作</a></li>
                                <li><a href="#">友情链接</a></li>
                            </ul>
                        </div>
                        <div class="col-xs-4">
                            <h4>联系方式</h4>
                            <ul class="list-unstyled">
                                <li><a href="#">新浪微博</a></li>
                                <li><a href="#">电子邮件</a></li>
                                <li><a href="#">留言板</a></li>
                            </ul>
                        </div>
                        <div class="col-xs-4">
                            <h4>特别致谢</h4>
                            <ul class="list-unstyled">
                                <li><a href="https://www.bootcss.com/">BootStrap中文网</a></li>
                                <li><a href="https://cn.vuejs.org/">Vue.js官网</a></li>
                                <li><a href="https://www.tmall.com/">天猫购物</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <ul class="list-inline text-center">
                    <li><a href="http://www.beian.miit.gov.cn/" target="_blank">京ICP备88888888号-8</a></li><li>京公网安备88888888888888</li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- footer end -->
    <script type="text/javascript" src="/js/myvue.js"></script>
    <script>
        new Vue({
            el:"#goodsDetail",
            data:{
                data: {},
                verifyCode:"",
                verifyCodeUrl:"",
            },
            methods:{
                doSeckill:function(){
                    var self = this;
                    $.ajax({
                        url:"/seckill/do_seckill",
                        data:{
                            goodsId:self.data.goods.id,
                            verifyCode:self.verifyCode,
                            address:mine.userInfo.address
                        },
                        type:"POST",
                        success:function(data){
                            if(data.code==0){
                                self.result();
                            }else{
                                layer.msg(data.msg);
                            }
                        },
                        error:function(msg){
                            layer.msg("客户端请求有误");
                        }
                    }).then(function(){
                        self.refreshVerifyCode();
                        $("#verifyCodeModal").modal("hide");
                    });
                },
                refreshVerifyCode:function(){
                    this.verifyCodeUrl = "/seckill/verifyCode?goodsId="+this.data.goods.id+"&timestamp="+new Date().getTime();
                },
                result:function(){
                    var self = this;
                    g_showLoading();
                    $.ajax({
                        url:"/seckill/result",
                        type:"GET",
                        data:{
                            goodsId:self.data.goods.id,
                        },
                        success:function(data){
                            if(data.code==0){
                                var result = data.data;
                                if(result<0){
                                    layer.msg("秒杀失败,下次继续努力哦！");
                                }else if(result==0){
                                    setTimeout(function(){
                                        self.result();
                                    }, 200);
                                }else{
                                    layer.confirm("恭喜你，秒杀成功！查看订单？", {btn:["确定","取消"]},
                                        function(){
                                            window.location.href="/order_detail.html?orderId="+result;
                                        },
                                        function(){
                                            layer.closeAll();
                                        });
                                }
                            }
                            else{
                                layer.msg(data.msg);
                            }
                        },
                        error:function(){
                            layer.msg("客户端请求有误");
                        }
                    });
                }
            },
            created:function(){
                var self = this;
                var goodsId = g_getQueryString("goodsId");
                $.ajax({
                    url:"/goods/seckill/detail/"+goodsId,
                    type:"GET",
                    dataType: "JSON",
                    async:false,
                    success:function(data){
                        if(data.code==0){
                            self.data = data.data;
                        }else{
                            layer.msg(data.msg);
                        }
                    },
                    error:function(msg){
                        layer.msg("客户端请求有误！");
                    }
                });
            },
            mounted:function(){
                var self = this;
                var timer = window.setInterval(function(){
                    if(self.data.remainSeconds>0){
                        self.data.remainSeconds= self.data.remainSeconds-1;
                    }else{
                        window.clearInterval(timer);
                    }
                },1000);
            }
        });
    </script>
</body>
</html>
